<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>响应式导航栏</title>
		<!--
    		@require zui.css
		-->	
    <link rel="stylesheet" href="../zui/css/zui.css" />
    <link  rel="stylesheet" href="css/nav.css" />
</head>
	<body>
		<nav class="navbar navbar-default  m-full in" role="navigation" id="nav" >
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-btn" data-toggle='full' data-target='#nav'>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
      				  </button>
					<a class="navbar-brand" href="#">全屏导航栏</a>
				</div>
				<div class="navbar-collapse" data-toggle='translate'>
					<ul class="nav navbar-nav">
						<li>
							<a href="#">index</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>
						<li>
							<a href="#">about</a>
						</li>

					</ul>
				</div>
			</div>
		</nav>
		<div class="container">
			<h5>
			<a href="#">内容</a>
			</h5>
		</div>
		<!--
			@require jquery.js
		-->	
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
			$(function() {
				$(".navbar-btn").on("click", function() {
					var obj = $(this).attr("data-target");
					$(obj).toggleClass("in");
				})
			})
		</script>
</body>

</html>